<template>

  <el-row>

  <el-col :span="24" v-if="pwdorpPwd == 0" class="title">
    <el-card>
    <el-button type="success" style="margin-top: 12px" @click="pwdorpPwd=1" >修改支付密码</el-button>
    <el-button type="primary" style="margin-top: 12px" @click="pwdorpPwd=2" >修改登录密码</el-button>
    <el-button type="info" style="margin-top: 12px" @click="pwdorpPwd=3" >设置支付密码</el-button>
    </el-card>
    <el-card>
      <div style="color: #f51000;font-size: 30px">注意！请保护好自己的账号哦，不要轻易借给他人。</div>
    </el-card>
  </el-col>

  <el-col :span="24" v-else-if="pwdorpPwd==1" class="content">
    <el-card>
  <el-steps style="max-width: 960px" :active="active" finish-status="success" align-center>
    <el-step title="请输入原支付密码" />
    <el-step title="请输入新支付密码" />
    <el-step title="修改成功" />
  </el-steps>
  <el-col v-if="active==1" >
    <div class="form-grid-parent">
    <el-form
        label-width="auto"
        style="width: 360px">
      <el-form-item label="请输入原支付密码">
        <el-input type="password" v-model="passwords.oldPwd"/>
      </el-form-item>
    </el-form>
    </div>
  </el-col>
  <el-col v-else-if="active==2">
    <div class="form-grid-parent">
    <el-form
        label-width="auto"
        style="width: 360px">
      <el-form-item label="请输入新支付密码">
        <el-input type="password" v-model="passwords.newPwd"/>
      </el-form-item>
    </el-form>
    </div>
  </el-col>
  <el-col v-else-if="active==3">
  设置完成
  </el-col>
      <el-button style="margin-top: 12px" @click="next" v-if="active==1">下一步</el-button>
      <el-button style="margin-top: 12px" @click="updatePayPwd" v-else-if="active==2">提交</el-button>
      <el-button style="margin-top: 12px" @click="next" v-else>完成</el-button>
    </el-card>
  </el-col>



    <el-col :span="24" v-else-if="pwdorpPwd==2" class="content">
      <el-card>
        <el-steps style="max-width: 960px" :active="active" finish-status="success" align-center>
          <el-step title="请输入原登录密码" />
          <el-step title="请输入新登录密码" />
          <el-step title="修改成功" />
        </el-steps>
        <el-col v-if="active==1">
          <div class="form-grid-parent">
          <el-form
              label-width="auto"
              style="max-width: 360px">
            <el-form-item label="请输入原登录密码">
              <el-input type="password" v-model="passwords.oldPwd"/>
            </el-form-item>
          </el-form>
          </div>
        </el-col>
        <el-col v-else-if="active==2">
          <div class="form-grid-parent">
          <el-form
              label-width="auto"
              style="width: 360px">
            <el-form-item label="请输入新登录密码">
              <el-input type="password" v-model="passwords.newPwd"/>
            </el-form-item>
          </el-form>
          </div>
        </el-col>
        <el-col v-else-if="active==3">
          修改完成
        </el-col>
        <el-button style="margin-top: 12px" @click="next" v-if="active==1">下一步</el-button>
        <el-button style="margin-top: 12px" @click="updatePwd" v-else-if="active==2">提交</el-button>
        <el-button style="margin-top: 12px" @click="next" v-else>完成</el-button>
      </el-card>
    </el-col>

    <el-col :span="24" v-else-if="pwdorpPwd==3" class="content">
      <el-card>
        <el-steps style="max-width: 960px" :active="active" finish-status="success" align-center>
          <el-step title="请输入登录密码" />
          <el-step title="请输入要设置的支付密码" />
          <el-step title="修改成功" />
        </el-steps>
        <el-col v-if="active==1">
          <div class="form-grid-parent">
          <el-form
              label-width="auto"
              style="width: 360px">
            <el-form-item label="请输入登录密码">
              <el-input type="password" v-model="setPassword.loginPwd"/>
            </el-form-item>
          </el-form>
          </div>
        </el-col>
        <el-col v-else-if="active==2">
          <div class="form-grid-parent">
          <el-form
              label-width="auto"
              style="width: 360px">
            <el-form-item label="请输入要设置的支付密码">
              <el-input type="password" v-model="setPassword.payPwd"/>
            </el-form-item>
          </el-form>
          </div>
        </el-col>
        <el-col v-else-if="active==3">
          修改完成
        </el-col>
        <el-button style="margin-top: 12px" @click="next" v-if="active==1">下一步</el-button>
        <el-button style="margin-top: 12px" @click="updateSetPwd" v-else-if="active==2">提交</el-button>
        <el-button style="margin-top: 12px" @click="next" v-else>完成</el-button>
      </el-card>
    </el-col>

  </el-row>
</template>

<script setup>
import { ref } from 'vue'
import userApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";
const active = ref(1)
//选择不同网页不同
const pwdorpPwd=ref(0);
//密码信息
const passwords=ref({
  newPwd:'',
  oldPwd:''
});
const setPassword=ref({
  loginPwd:'',
  payPwd:''
});
const next = () => {
  if (active.value++ > 2)
  {
    active.value = 1
    pwdorpPwd.value=0
  }
}
//修改支付密码
function updatePayPwd(){
  userApi.updatePayPwd(passwords.value)
      .then(resp=>{
        if (resp.code == 10000){
          ElMessage.success(resp.msg)
          next();
        }else {
          ElMessage.error(resp.msg)
          active.value=1
          pwdorpPwd.value=0
        }
      })
}

function updatePwd(){
  userApi.updatePwd(passwords.value)
      .then(resp=>{
        if (resp.code == 10000){
          ElMessage.success(resp.msg)
          next();
        }else {
          ElMessage.error(resp.msg)
          active.value=1
          pwdorpPwd.value=0
        }
      })
}
function updateSetPwd(){
  userApi.updateSetPwd(setPassword.value)
      .then(resp=>{
        if (resp.code == 10000){
          ElMessage.success(resp.msg)
          next();
        }else {
          ElMessage.error(resp.msg)
          active.value=1
          pwdorpPwd.value=0
        }
      })
}
</script>
<style scoped>


.title {
  text-align: center;
  margin-bottom: 30px;
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
}

.el-button {
  border-color: #4caf50;
  color: #000000;
  padding: 10px 20px;
  margin: 0 50px;
  border-radius: 5px;
}

.el-button:hover {
  border-color: #388e3c;
}

.el-steps.el-step__title {
  color: #2196f3;
  font-size: 18px;
}

.el-steps.el-step__line {
  background-color: #2196f3;
  width: 3px;
}

.el-steps.el-step__line-inner {
  border-color: #2196f3;
}

.el-steps.el-step__icon.is-active {
  border-color: #2196f3;
  background-color: #2196f3;
  color: white;
}

.el-steps.el-step__icon.is-finish {
  border-color: #2196f3;
  background-color: #2196f3;
  color: white;
}

.content {
  margin: 0 auto;
  text-align: center;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.content.el-col {
  margin-top: 25px;
  font-size: 16px;
  color: #555;
}

.content.el-button[type="primary"] {
  background-color: #2196f3;
  border-color: #2196f3;
  padding: 12px 25px;
  border-radius: 6px;
}

.content.el-button[type="primary"]:hover {
  background-color: #1976d2;
  border-color: #1976d2;
}
.form-grid-parent {
  margin-top: 20px;
  display: grid;
  place-items: center;
}
</style>